<template>
  <div class="add-container">
    <el-button type="text" size="small" @click="editOpenDialogHandler">编辑</el-button>
    <el-dialog :visible.sync="dialog" :title="title" width="600px" :before-close="cancel" :append-to-body="true">
      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="136px">
        <el-form-item label="菜品名称:" prop="name">
          <el-input v-model="form.name" style="width: 370px;" placeholder="请填写菜品名称" />
        </el-form-item>
        <el-form-item label="菜品分类:" prop="categoryId">
          <el-select v-model="form.categoryId" placeholder="请选择菜品分类">
            <el-option
              v-for="item in dishCategoryDataList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜品价格:" prop="price">
          <el-input v-model="form.price" style="width: 370px;" placeholder="请填写菜品价格"/>
        </el-form-item>
        <el-form-item label="菜品图片:" prop="image">
          <el-upload
            action="/dev-api/common/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess">
            <div style="width: 160px; height: 160px; line-height: 160px; border: 1px solid #f0f0f0;">
              <img v-if="dishImageName" :src="`/dev-api/common/download?name=${dishImageName}`" style="width: 160px; height: 160px;">
              <span v-else>上传图片</span>
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="菜品描述:" prop="description">
          <el-input type="textarea" :rows="6" maxlength="200" show-word-limit v-model="form.description" style="width: 370px;" placeholder="菜品描述，最多200字"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="display: flex; justify-content: flex-end;">
        <div>
          <el-button type="text" @click="cancel">取消</el-button>
          <el-button @click="submitHandler" style="margin-left: 10px !important;" :loading="loading" type="primary"
            >确认</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { dishCategoryList, editDish } from '@/api/dish'

export default {
  props: {
    selectedData: {
      type: Object,
      required: true
    },
    sup_this: {
      type: Object,
      required: true
    },
  },
  data() {
    return {
      loading: false,
      dialog: false,
      title: '编辑菜品',
      form: {
        name: '',
        categoryId: '',
        flavors: [],
        image: '',
        price: '',
        description: '',
        status: 1,
      },
      dishImageName: '',
      dishCategoryDataList: [],
      rules: {
        name: [
          { required: true, message: '请输入菜品姓名', trigger: 'blur' },
        ],
        categoryId: [
          { required: true, message: '请选择菜品分类', trigger: 'blur' },
        ],
        price: [
          { required: true, message: '请填写菜品价格', trigger: 'blur' },
        ],
        image: [
          { required: true, message: '请上传菜品图片', trigger: 'blur' },
        ],
      },
    }
  },
  methods: {
    editOpenDialogHandler() {
      this.dialog = true

      this.form = {
        name: this.selectedData.name,
        categoryId: this.selectedData.categoryId,
        flavors: this.selectedData.flavors,
        image: this.selectedData.image,
        price: this.selectedData.price,
        description: this.selectedData.description,
        status: this.selectedData.status,
      }

      // 获取菜品分类
      this.getDishCategoryList()
    },
    /**
     * 获取菜品分类
     */
    getDishCategoryList() {
      let params = {
        type: 1
      }

      dishCategoryList(params).then(res => {
        if (res.code) {
          this.dishCategoryDataList = res.data
        }
      }).catch(err => {
        // 错误的处理
      })
    },
    /**
     * 上传图片成功的回调
     */
    handleAvatarSuccess(res) {
      this.dishImageName = res.data;
      this.form.image = res.data
    },
    cancel() {
      this.resetForm()
    },
    resetForm() {
      this.dialog = false
      this.$refs['form'].resetFields()

      this.form = {
        name: '',
        categoryId: '',
        flavors: [],
        image: '',
        price: '',
        description: '',
        status: 1,
      }
    },
    submitHandler(){
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.loading = true

          editDish(this.form).then(res => {
            if (res.data) {
              this.resetForm()

              this.$notify({
                title: '编辑',
                message: '编辑成功',
                type: 'success',
                duration: 2500
              })

              this.loading = false

              this.sup_this.getDishList()
            } else {
              this.$notify({
                title: '编辑',
                message: err.msg,
                type: 'error',
                duration: 2500
              })
            }
          }).catch(err => {
            this.loading = false
            // 错误的处理
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.add-container {
  display: inline-block;
  margin-right: 5px;
}
</style>
